<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="tag" uri="com.sand.myTag" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/public.css" media="all">
    <style>
        body{
            background-color: white;
        }
        table tr{
            background-color: white;
        }
        table tr a{
            color: black;
        }
    </style>
</head>
<body>

<div class="layui-form layuimini-form">
    <table id="tab" class="layui-table-hover" style="margin-top: 50px;">
        <tr>
            <td>
                <label class="layui-form-label" id="lab1" style="font-size: 20px;float: right;"><b>国内城市</b></label>
            </td>
            <td>
                <label class="layui-form-label" id="lab2" style="font-size: 20px;float: left;"><b>国外城市</b></label>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="height: 150px;">
                <div style="width: 600px;height:60px;border: 1px solid darkgray;margin-left:150px;font-size: 20px;">
                    <i class="layui-icon layui-icon-search" style="font-size: 20px;margin-left: 20px;"></i>
                    <input id="sousuo_text" type="text" class="" placeholder="搜  索  城  市" style="height: 100%;width: 80%;border: 0px;border-radius: 10px;">
                    <button type="button" class="layui-btn layui-btn-normal" id="btn" style="border-radius: 10px;">搜索</button>

                </div>
                <ul id="sousuo" class="layui-nav-tree" style="width: 600px;float: left;margin-left:150px;border-bottom-right-radius: 15px;border-bottom-left-radius: 15px;border: 1px solid gray;background-color: white;position: absolute;z-index: 99">

                </ul>
            </td>
        </tr>
        <c:forEach items="${cityShow}" var="ite">
        <tr>
            <td style="width: 200px;text-align: right;border-right: 1px solid whitesmoke;">
                <label class="layui-form-label" style="font-size: 20px;width: 80%;"><b>${ite.title}</b></label>
            </td>
            <td class="tdcs" style="border-bottom: 1px solid whitesmoke;">
                <c:forEach items="${ite.child}" var="it">
                    <span style="margin-left: 10px;"><a onclick="play(${it.id},'${it.title}');" href="#">${it.title}</a></span>
                </c:forEach>
            </td>
        </tr>
        </c:forEach>
    </table>
</div>

<script src="${pageContext.request.contextPath}/layui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/layui/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;


        play=function (id,title) {
            parent.$("#sel").val(title);
            parent.$("#selId").val(id);
            parent.upCity(id);
            // parent.$('#sel').val(id);
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        }

        $(".tdcs").hover(function(){
            $(this).css("background-color","whitesmoke");
        },function(){
            $(this).css("background-color","white");
        });
        $("#tab tr a").hover(function(){
            $(this).css("color","blue");
        },function(){
            $(this).css("color","black");
        });

        $("#lab1").css({"color":"black","border-bottom":"1px solid black"})
        $("#lab1").click(function(){
            $(this).css({"color":"black","border-bottom":"1px solid black"})
            $("#lab2").css({"color":"gray","border-bottom":"1px solid lightgray"})
        })
        $("#lab2").click(function(){
            $(this).css({"color":"black","border-bottom":"1px solid black"})
            $("#lab1").css({"color":"gray","border-bottom":"1px solid lightgray"})
        })

        $("#btn").click(function (){
            $("sousuo_text").on();
        })

        //城市搜索事件
        $("#sousuo_text").on("input",function(e){
            //获取input输入的值
            // console.log(e.delegateTarget.value);
            var txt=e.delegateTarget.value;
            $("#sousuo").html(null);
            if(txt!=null && txt!=""){
                $.ajax({
                    url:"${pageContext.request.contextPath}/city/queryCityByLikeName",
                    type:"post",
                    data:{"name":txt},
                    dataType:"json",
                    success:(rs)=>{

                        $.each(rs,function (i,j){
                            $("#sousuo").append("<li value='"+j.rid+"' class='layui-nav-item' >"+j.name+"</li>");
                        })
                        $("#sousuo>li").hover(function(){
                            $(this).addClass("layui-this")
                        },function(){
                            $(this).removeClass("layui-this")
                        })
                        $("#sousuo>li").click(function (data){
                            parent.$("#sel").val(this.innerHTML);
                            parent.$("#selId").val(this.value);
                            parent.upCity(this.value);
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        })

                    }
                })
                form.render('select');
            }
        });
    });
</script>
</body>
</html>